<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1" class="box" title="test" xxx="yyy">div文本</div>
  <script>
    // 1.获取标签中的属性
    var oDiv = document.getElementById("div1")
    // 第一种
    // 不支持获取自定义属性
    console.log(oDiv.title);
    console.log(oDiv.xxx);
    // 第二种
    // 支持获取自定义属性
    console.log(oDiv.getAttribute("title"));
    console.log(oDiv.getAttribute("xxx"));

    // 2.给标签设置属性
    // 第一种
    // 这种方法虽然可以，但是它不会作用在DOM中（检查元素看不到，但实际是设置成功了的）
    // oDiv.className = "box5"
    // oDiv.zzz = "ooo"
    // 第二种
    oDiv.setAttribute("class", "box2")
    oDiv.setAttribute("zzz", "ooo")

    // 3.删除标签中的属性
    oDiv.removeAttribute("title")
  </script>
</body>
</html>